import { Arrows, ArrowsInteractive } from './jsx/allLiveEditors'

# Arrows

`<Arrows />` renders arrow shapes.

## Props

| Name       | Type                         | Default | Description                      |
| ---------- | ---------------------------- | ------- | -------------------------------- |
| `children` | `(PoseArrow | PointArrow)[]` | `[]`    | array of Arrow markers to render |
| `depth`    | `DepthState` | `undefined` | optional depth state settings   |
| `blend`    | `BlendState` | `undefined` | optional blend state settings   |

### PoseArrow

```js
type PoseArrow = {
  id?: number, // positive integer
  pose: {
    position: { x: number, y: number, z: number },
    orientation: { x: number, y: number, z: number, w: number }
  }
  scale: {
    x: number, // arrow length
    y: number, // arrow width
    z: number // arrow arrow height
  },
  color: {
    r: number, // between 0 and 1
    g: number, // between 0 and 1
    b: number, // between 0 and 1
    a: number, // between 0 and 1
  },
}
```

### PointArrow

```js
type PointArrow = {
  id?: number, // positive integer
  points: [
    // the start of the arrow shaft
    {
      x: number,
      y: number,
      z: number,
    },
    // the end of the arrow head
    {
      x: number,
      y: number,
      z: number,
    },
  ],
  scale: {
    x: number, // shaft diameter
    y: number, // head diameter
    z: number, // head length
  },
  color: {
    r: number, // between 0 and 1
    g: number, // between 0 and 1
    b: number, // between 0 and 1
    a: number, // between 0 and 1
  },
};
```

## Demo

<Arrows />

## Mouse Interaction

<ArrowsInteractive />
